<!DOCTYPE html>
<html>
<head>
    <title>中序遍历满二叉树</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <link rel="stylesheet" href="../lib/main.css" type="text/css">
    <script src="../lib/pixi.min.js"></script>
    <script src="../lib/pixi-layers.js"></script>
    <script src="../lib/tween.js"></script>
    <script src="../lib/class.js"></script>
    <script src="../lib/treeVAS.js"></script>
</head>
<body>
    <div id="par">
        <canvas id="main"></canvas>
    </div>
    <div class="butt">
        <div class="b1" id="auto">自动</div>
        <div class="b2" id="next">下一步</div>
        <div class="b3" id="reset">重置</div>
    </div>
</body>
<script>
    let config = new T.Config({
        view: document.getElementById("main"),
        resizeTo: document.getElementById("par"),
        resolution: 2,
        backgroundColor: 0xffffff,
        bottom: 50
    });
    let tree = new T.app(config);

    /*
    * 绑定渲染器
    * */
    let cr = ()=>{
        c = tree.ergodic(T.ergodicFn.LNR);
        c.onEnd = () => document.getElementById("auto").innerHTML = "自动";
        return c;
    };

    let c = null;
    a = T.generateFn.completeBinaryTree();
    b = tree.renderer(a);
    b.onEnd = cr;
    b.end();

    document.getElementById("reset").onclick = ()=>{
        if (!c.using) tree.clearn();
    }

    document.getElementById("auto").onclick = ()=>{
        if (c.using) document.getElementById("auto").innerHTML = c.auto() ? "暂停" : "自动";
        else if (!tree.root.isSign) {
            cr().auto();
            document.getElementById("auto").innerHTML = "暂停";
        }
    }

    document.getElementById("next").onclick = ()=>{
        if (c.using) c.next();
        else if (!tree.root.isSign) cr().next();
    }
</script>
</html>